import IconSearch from '@/assets/svg/icon_search'
import React, { memo, useState } from 'react'
import SearchTabs from './c-cpns/search-tabs'
import { HeaderCenterWrapper } from './style'
import { searchData } from '@/assets/data/search-data'
import SearchInfo from './c-cpns/search-info'
import { CSSTransition } from 'react-transition-group'

const HeaderCenter = memo((props) => {
  const { isSearch, searchBarClick } = props
  const [curIndex, setCurrentIndex] = useState(0)

  const tabs = searchData.map(item => item.title)
  const info = searchData[curIndex].conditions

  function tabClickHandle (index) {
    setCurrentIndex(index)
  }

  function searchBarClickHandle () {
    if (searchBarClick) searchBarClick()
  }

  return (
    <HeaderCenterWrapper>
      <CSSTransition
        in={!isSearch}
        classNames="bar"
        unmountOnExit
        timeout={200}
      >
        <div className="search" onClick={searchBarClickHandle}>
          <div className="search-content">
            搜索房源和体验
          </div>
          <div className="search-icon">
            <IconSearch />
          </div>
        </div>
      </CSSTransition>

      <CSSTransition
        in={isSearch}
        classNames="detail"
        unmountOnExit
        timeout={200}
      >
        <div className="search-detail">
          <SearchTabs tabs={tabs} tabClick={tabClickHandle} curIndex={curIndex} />
          <div className="infos">
            <SearchInfo info={info} />
          </div>
        </div>
      </CSSTransition>
    </HeaderCenterWrapper>
  )
})

export default HeaderCenter